<!--
 * @Author: bsj
 * @Date: 2024-11-21
 * @LastEditors: baoshijie baoshijie
 * @LastEditTime: 2024-11-23 20:18:38
 * @Description: file content
 * @FilePath: \computing-equipment\src\views\userInfo\userInfo.vue
-->
<template>
    <div class="userInfo">
        <div class="optRow">
            <el-button type="primary" @click="handleAdd">添加</el-button>
        </div>
        <el-table :data="tableData" border stripe style="width: 940px" :height="maxHeight">
            <el-table-column prop="accountNumber" label="登录账号" width="180"></el-table-column>
            <el-table-column prop="username" label="用户名" width="150"></el-table-column>
            <el-table-column prop="userPhone" label="手机号" width="180"></el-table-column>
            <el-table-column prop="permission" label="权限" width="180">
                <template #default="scope">
                    <el-tag v-for="(item, index) in scope.row.permission" :key="index" size="small">{{ item.name
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="opt" label="操作" width="260">
                <template #default="scope">
                    <el-link type="primary" class="optBtn" @click="handleEdit(scope.row)">编辑</el-link>
                    <el-link type="danger" class="optBtn" @click="handleDelete(scope.row, scope.$index)">删除</el-link>
                    <!-- <el-link type="success" class="optBtn" @click="resetPassword">修改密码</el-link> -->
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" top="5vh">
            <el-form :model="optParams" ref="addRef" :rules="rules" :inline="false" label-width="120px">
                <el-form-item label="登录账号" prop="accountNumber">
                    <el-input v-model="optParams.accountNumber" maxlength="16" style="width: 200px" />
                    <span class="tips">最多16个字符</span>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="optParams.username" maxlength="18" style="width: 200px" />
                    <span class="tips">最多18个字符</span>
                </el-form-item>
                <el-form-item label="手机号" prop="userPhone">
                    <el-input v-model="optParams.userPhone" maxlength="11" style="width: 200px" />
                </el-form-item>
                <el-form-item label="密码" prop="passWord">
                    <el-input v-model="optParams.passWord" type="passWord" maxlength="18" style="width: 200px" />
                    <span class="tips">最多18个字符</span>
                </el-form-item>
                <el-form-item label="权限" prop="permission">
                    <el-checkbox-group v-model="optParams.permission">
                        <el-checkbox v-for="(item, index) in permissionList" :key="index" :value="item.code">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
const dialogVisible = ref(false)
const dialogTitle = ref('新增')
const isEidt = ref(false)
const checkPhone = (rule, value, callback) => {
  const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
//   const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

  if (!value) {
    return callback(new Error('手机号不能为空'))
  } else if (reg.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正确的手机'))
  }
}
const rules = {
    accountNumber: [{ required: true, max: 16, message: '请输入登录账号', trigger: 'blur' }],
    username: [{ required: true,max: 18, message: '请输入用户名', trigger: 'blur' }],
    userPhone: [{ required: true,  min: 11, max: 11, message: '请输入手机号', trigger: 'blur' },
    { validator: checkPhone, trigger: 'blur' }],
    passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }],

}
const permissionList = ref([
    {
        name: '销售报价单计算',
        code: 'assistedDecision',
    },
    {
        name: '成本参数配置',
        code: 'costParameterConfiguration',
    },
    {
        name: '账号权限管理',
        code: 'userInfo',
    }
])
const tableData = [
    {
        accountNumber: 'admin',
        username: '管理员',
        userPhone: '12345678901',
        permission: [
            {
                name: '销售报价单计算',
                code: 'assistedDecision',
            },
            {
                name: '成本参数配置',
                code: 'costParameterConfiguration',
            },
            {
                name: '账号权限管理',
                code: 'userInfo',
            }
        ]
    },
    {
        accountNumber: 'admin2',
        username: '普通用户',
        userPhone: '12345678901',
        permission: [
            {
                name: '销售报价单计算',
                code: 'assistedDecision',
            }
        ]
    },
]
const optParams = ref({
    accountNumber: '',
    username: '',
    userPhone: '',
    passWord: '',
    permission: []
})
const addRef = ref(null)
async function submitForm() {
    await addRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            dialogVisible.value = false
            if (!isEidt.value) {
                tableData.value.push(optParams.value)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
function handleAdd() {
    isEidt.value = false
    dialogTitle.value = '新增'
    optParams.value = {
        accountNumber: '',
        username: '',
        userPhone: '',
        passWord: '',
        permission: []
    }
    dialogVisible.value = true
}
function handleDelete(row, index) {
    ElMessageBox.confirm('是否删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 删除数据
        tableData.value.splice(index, 1);
    }).catch(() => { });
}
const handleEdit = (row) => {
    let data = JSON.parse(JSON.stringify(row))
    data.permission = row.permission.map(item => item.code)
    isEidt.value = true
    optParams.value = data
    dialogVisible.value = true
};
const maxHeight = ref(600)
onMounted(() => {
    maxHeight.value = document.documentElement.clientHeight - 150;
})
</script>
<style scoped lang="scss">
.optRow {
    margin-bottom: 20px;
}

.optBtn {
    margin: 0 5px;
}
.tips{
    color:var(--el-color-danger) ;
    font-size: 12px;
}
</style>